<template>
  <div class="dashboard-container">
    <div class="app-container">
      <head-tool>
        <div class="btns" slot="after">
          <el-button type="primary" size="small">导入</el-button>
          <el-button type="primary" size="small" icon="el-icon-plus"
            >新增员工</el-button
          >
        </div>
      </head-tool>

      <el-card>
        <el-table :data="tableData">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column prop="username" label="姓名"></el-table-column>
          <el-table-column prop="staffPhoto" label="头像" width="100px">
            <template slot-scope="{ row }">
              <img
                style="width:60px"
                v-imgerror="defaultImg"
                :src="row.staffPhoto"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号"></el-table-column>
          <el-table-column prop="workNumber" label="工号"></el-table-column>
          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template slot-scope="{ row }">
              {{ row.formOfEmployment | formatHireType }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门"></el-table-column>
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
          ></el-table-column>
          <el-table-column prop="enableState" label="状态">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.enableState"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="230px">
            <div
              slot-scope="{ row }"
              style="display: flex; justify-content: space-between;"
            >
              <el-link type="primary">查看</el-link>
              <el-link type="primary">转正</el-link>
              <el-link type="primary">调岗</el-link>
              <el-link type="primary">离职</el-link>
              <el-link type="primary">角色</el-link>
              <el-link type="primary">删除</el-link>
            </div>
          </el-table-column>
        </el-table>

        <el-pagination
          style="text-align:center;margin:20px"
          :current-page="pageInfo.page"
          :page-size="pageInfo.pagesize"
          :total="pageInfo.total"
          layout="total,prev,pager,next"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmpList } from '@/api/employees'
import constant from '@/api/constant/employees'
export default {
  name: 'emp',
  data () {
    return {
      defaultImg: require('@/assets/common/head.jpg'),
      tableData: [{ name: 'yifa' }],
      pageInfo: {
        page: 1,
        pagesize: 10,
        total: 0
      }
    }
  },
  created () {
    this.getList()
  },

  methods: {
    async getList () {
      let res = await getEmpList(this.pageInfo)
      this.tableData = res.data.rows
      this.pageInfo.total = res.data.total
    }
  },
  filters: {
    formatHireType (val) {
      let list = constant.hireType.filter(item => item.id === val)
      return list[0].value
    }
  }
}
</script>

<style></style>
